<template>
  <el-dialog title="考试成绩" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :inline="true" :model="dataForm" ref="dataForm">
      <el-row>
        <el-form-item label="真实姓名:">
          <el-input
            v-model="dataForm.realname"
            placeholder="请输入真实姓名"
            style="width: 140px"
            clearable
          ></el-input>
        </el-form-item>
        <!--<el-form-item label="身份证号码:">
                    <el-input v-model="dataForm.identityCard" placeholder="请输入身份证号码" style="width: 140px"></el-input>
        </el-form-item>-->
        <el-form-item label="职务名称:" prop="duty">
          <el-select style="width:140px" v-model="dataForm.duty" filterable placeholder="职务">
            <el-option
              v-for="item in dutyList"
              :key="item.id"
              clearable
              :label="item.label"
              :value="item.description"
            ></el-option>
          </el-select>
        </el-form-item>
        <span>
          <el-button type="small" @click="search">搜索</el-button>
        </span>
      </el-row>
      <el-row>
        <el-form-item label="部门名称:" prop="deptId">
          <el-popover ref="deptListPopover" placement="bottom-start" trigger="click">
            <el-tree
              :data="deptList"
              v-model="dataForm.deptId"
              :props="deptListTreeProps"
              node-key="id"
              ref="deptListTree"
              @current-change="deptListTreeCurrentChangeHandle"
              :default-expand-all="true"
              :highlight-current="true"
              :expand-on-click-node="false"
            ></el-tree>
          </el-popover>
          <el-input
            v-model="dataForm.deptName"
            v-popover:deptListPopover
            :readonly="true"
            placeholder="点击选择上级部门"
            style="width: 140px"
          ></el-input>
        </el-form-item>
        <el-form-item label="工种类型:" prop="craftId">
          <el-select style="width:150px" v-model="dataForm.craftId" filterable placeholder="点击选择工种">
            <el-option
              v-for="item in typeworkList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table
      :data="dataList"
      v-loading="dataListLoading"
      border
      max-height="400"
      style="width: 100%;"
    >
      <el-table-column align="center" type="index" header-align="center" width="80px" label="序号" />
      <el-table-column prop="realName" header-align="center" align="center" label="姓名" />
      <el-table-column prop="deptName" header-align="center" align="center" label="部门" />
      <el-table-column prop="craftName" header-align="center" align="center" label="岗位/工种" />
      <el-table-column prop="submitPaperTime" header-align="center" align="center" label="考试时间" />
      <el-table-column prop="examName" header-align="center" align="center" label="考试名称" />
      <el-table-column prop="institutional" header-align="center" align="center" label="组织机构" />
      <el-table-column prop="score" header-align="center" align="center" label="分数" />
      <el-table-column prop="isPass" header-align="center" align="center" label="是否及格">
        <template slot-scope="scope">{{scope.row.isPass?'及格':'未及格'}}</template>
      </el-table-column>
      <!--<el-table-column prop="craftName" header-align="center" align="center" label="排名"/>-->
      <el-table-column header-align="center" align="center" label="备注" />
    </el-table>
    <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px">
      <el-button type="primary" icon="el-icon-download" @click="handleDownload()">导出</el-button>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 0"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'

export default {
  name: 'exam-schoolreport',
  data() {
    return {
      visible: false,
      dataListLoading: false,
      typeworkList: [],
      dutyList: [],
      deptList: [],
      dataList: [],
      props: {
        value: 'deptId',
        label: 'name',
        children: 'children'
      },
      deptListTreeProps: {
        label: 'name',
        children: 'children'
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        type: 'DUTY',
        deptId: '',
        examId: '',
        duty: '',
        craftId: ''
      }
    }
  },
  mounted() {
    this.getTypeworkList()
    this.getdeptList()
    this.getTypeworkList()
    this.getdutyList()
  },
  methods: {
    init(id) {
      this.visible = true
      this.dataForm = {
        type: 'DUTY',
        deptId: '',
        examId: id,
        duty: '',
        craftId: ''
      }
      this.search()
    },
    getdeptList() {
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/dept/select'),
        method: 'post'
      }).then(data => {
        for (let i = 0; i < data.data.length; i++) {
          if (data.data[i].deptId === -1) {
            data.data.splice(i, 1)
          }
        }
        this.deptList = data.data
        // this.deptList = this.deptList.splice(0, 1)
        this.deptList = treeDataTranslate(this.deptList, 'id')
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.search()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.search()
    },
    // 工种
    getTypeworkList() {
      this.$http({
        url: this.$http.adornUrl(`/exam-admin/ques/cate/select/`),
        method: 'post'
      }).then(data => {
        if (data && data.code === 200) {
          this.typeworkList = data.data
        } else {
          this.typeworkList = []
          this.totalPage = 0
        }
      })
    },
    // 职务
    getdutyList() {
      this.$http({
        url: this.$http.adornUrl(`/sys/dict/type `),
        method: 'post',
        data: {
          type: this.dataForm.type
        }
      }).then(res => {
        this.dutyList = res.data
      })
    },
    // 搜索
    search() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/exam/exam/examSearch`),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize,
          examId: this.dataForm.examId,
          realname: this.dataForm.realname,
          identityCard: this.dataForm.identityCard,
          duty: this.dataForm.duty,
          deptId: this.dataForm.deptId,
          craftId: this.dataForm.craftId
        }
      }).then(res => {
        this.dataListLoading = false
        this.dataList = res.data.list
        this.totalPage = res.data.totalCount
      })
    },
    handleDownload() {
      this.$http({
        url: this.$http.adornUrl(`/exam/exam/examSearch`),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: 99999,
          examId: this.dataForm.examId
        }
      }).then(res => {
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = [
            '姓名',
            '部门',
            '岗位/工种',
            '考试时间',
            '考试名称',
            '组织机构',
            '分数',
            '是否及格',
            '备注'
          ]
          const filterVal = [
            'realName',
            'deptName',
            'craftName',
            'submitPaperTime',
            'examName',
            'institutional',
            'score',
            'isPass'
          ]
          const data = this.formatJson(filterVal, res.data.list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            // 盖州煤业“一通三防”安全考试成绩汇总表
            filename: `"${
              res.data.list[0].examName
            }"安全考试成绩汇总表${new Date().toLocaleDateString()}`
          })
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => (j === 'isPass' ? (v[j] ? '及格' : '未及格') : v[j]))
      )
    },
    // 菜单树选中
    deptListTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptName = data.name
      this.dataForm.deptId = data.id
    },
    // 菜单树设置当前选中节点
    deptListTreeSetCurrentNode() {
      this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
      this.dataForm.deptName = (this.$refs.deptListTree.getCurrentNode() || {})['name']
    }
  }
}
</script>

<style scoped>
</style>
